<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  <title>鹏酱的小窝</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta property="og:type" content="website">
<meta property="og:title" content="鹏酱的小窝">
<meta property="og:url" content="http://example.com/index.html">
<meta property="og:site_name" content="鹏酱的小窝">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="亚鹏">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/atom.xml" title="鹏酱的小窝" type="application/atom+xml">
  
  
    <link rel="shortcut icon" href="/favicon.png">
  
  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">

  
  
<link rel="stylesheet" href="/css/style.css">

  
    
<link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css">

  
<meta name="generator" content="Hexo 6.2.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">鹏酱的小窝</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">欢迎来到鹏酱的小窝</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://example.com"></form>
      </div>
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main">
  
    <article id="posts-面试题" class="h-entry article article-type-posts" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/2022/05/23/%E9%9D%A2%E8%AF%95%E9%A2%98/" class="article-date">
  <time class="dt-published" datetime="2022-05-23T01:20:43.000Z" itemprop="datePublished">2022-05-23</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/2022/05/23/%E9%9D%A2%E8%AF%95%E9%A2%98/">面试题</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h5 id="1-什么是同源策略？什么是非同源策略？非同源策略产生什么问题？如何解决跨域？jsonp什么原理？如何获取jsonp返回值？jsonp的优缺点？除了jsonp还有那些跨域手段？"><a href="#1-什么是同源策略？什么是非同源策略？非同源策略产生什么问题？如何解决跨域？jsonp什么原理？如何获取jsonp返回值？jsonp的优缺点？除了jsonp还有那些跨域手段？" class="headerlink" title="1.  什么是同源策略？什么是非同源策略？非同源策略产生什么问题？如何解决跨域？jsonp什么原理？如何获取jsonp返回值？jsonp的优缺点？除了jsonp还有那些跨域手段？"></a>1.  什么是同源策略？什么是非同源策略？非同源策略产生什么问题？如何解决跨域？jsonp什么原理？如何获取jsonp返回值？jsonp的优缺点？除了jsonp还有那些跨域手段？</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">答：协议、域名、端口一致为同源策略，同源策略是浏览器为了安全访问网页内容而出现的一种措施。 【https协议的默认端口号<span class="number">443</span>，http端口<span class="number">80</span>】</span><br><span class="line">非同源策略就是当使用ajax请求时协议、域名、端口号中有一项不相同时出现的情况。</span><br><span class="line">非同源策略会产生跨域请求。</span><br><span class="line">前端可以使用jsonp解决，也可以借助nodejs作为代理请求。</span><br><span class="line">jsonp就是借助了script标签的src属性可以跨源获取脚本来实现跨域请求。</span><br><span class="line">获取数据需要前端与后端协商好回调函数，后端把数据放在回调函数中，前端预先声明好回调函数，当数据返回时前端的函数自动执行就可以获取数据了，如果后端不支持回调函数，则前端一般需要在<span class="variable language_">window</span>对象上查看找数据。【示例：<span class="attr">http</span>:<span class="comment">//xxx.com?list=1&amp;callback=cb】</span></span><br><span class="line">jsonp的优点是兼容性好，几乎所有支持js的浏览器都可以使用，缺点是只能get方式请求，而且容易被注入攻击。</span><br><span class="line">除了jsonp外还可以使用nodejs、nginx，webpack、vueCli来代理请求接口</span><br></pre></td></tr></table></figure>
<h5 id="2-vue是什么？什么是单页面应用？什么是spa应用？vue的优缺点是什么？什么是MvvM模式？和MVC模式相比有什么不同？什么是渐进式框架？Vue和jq的对比有何不同？"><a href="#2-vue是什么？什么是单页面应用？什么是spa应用？vue的优缺点是什么？什么是MvvM模式？和MVC模式相比有什么不同？什么是渐进式框架？Vue和jq的对比有何不同？" class="headerlink" title="2.  vue是什么？什么是单页面应用？什么是spa应用？vue的优缺点是什么？什么是MvvM模式？和MVC模式相比有什么不同？什么是渐进式框架？Vue和jq的对比有何不同？"></a>2.  vue是什么？什么是单页面应用？什么是spa应用？vue的优缺点是什么？什么是MvvM模式？和MVC模式相比有什么不同？什么是渐进式框架？Vue和jq的对比有何不同？</h5> <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">    答：vue是一个以数据驱动视图的轻量级渐进式<span class="variable constant_">MVVM</span>框架：</span><br><span class="line"></span><br><span class="line">	数据驱动视图:常规的js都是操作dom来开发程序，代表者jquery $(<span class="string">&#x27;#box&#x27;</span>).<span class="title function_">on</span>(<span class="string">&#x27;click&#x27;</span>)，vue不用直接操作dom，用数据来控制元素的变化。</span><br><span class="line"></span><br><span class="line">单页面应用也叫spa应用，指的是整个项目中只有一个html页面，所有的内容都是在这个页面中呈现的。</span><br><span class="line">vue优缺点：优点是模块化开发，组件复用，开发效率快。缺点：首屏加载速度没有静态页面快，因为dom都是js生成的，导致seo爬虫不友好，页面被爬取的机率特别小。</span><br><span class="line">可以ssr服务端渲染来优化seo爬虫。</span><br><span class="line"><span class="attr">MVVM</span>:m是数据模型model，v是view视图。model是js，v是页面。模型到视图，视图到模型，数据的双向绑定的。数据的双向响应模式。</span><br><span class="line"><span class="variable constant_">MVC</span>是严格的一种控制模式，在视图和模型之间多了一个控制层，两端<span class="variable constant_">MV</span>修改后必须经过C层后才能更新。<span class="variable constant_">MVC</span>其实最早是后端语言中的一种程序设计策略，前端里目前只有angular是<span class="variable constant_">MVC</span>模式的框架，一般银行使用java+angular开发项目。</span><br><span class="line"></span><br><span class="line">渐进式框架：我们可以只用vue中一小部分去开发，而不是说用了vue就必须全部使用vue的语法。可以让我们慢慢的一点点的接受vue开发项目。</span><br><span class="line">jq是一个用js封装的操作dom的库，而vue是一个以数据驱动视图的轻量级渐进式<span class="variable constant_">MVVM</span>框架。</span><br></pre></td></tr></table></figure>
<h5 id="3-vue底层原理？vue响应式原理？vue的数据双向绑定原理？"><a href="#3-vue底层原理？vue响应式原理？vue的数据双向绑定原理？" class="headerlink" title="3. vue底层原理？vue响应式原理？vue的数据双向绑定原理？"></a>3. vue底层原理？vue响应式原理？vue的数据双向绑定原理？</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">答：vue2的底层原理是基于 <span class="title class_">Object</span>.<span class="property">defineProperty</span>封装的一种发布订阅模式，利用它的get和set方法对对象的属性进行监听。vue3是基于es6的proxy封装的发布订阅模式。</span><br><span class="line"><span class="title class_">Object</span>.<span class="property">defineProperty</span>只能监听对象的属性并且不能监听动态添加的属性。es6的proxy可以监听一切。</span><br></pre></td></tr></table></figure>
<h5 id="4-vue常用指令？html和text的区别？show和if的区别？watch和computed的区别？"><a href="#4-vue常用指令？html和text的区别？show和if的区别？watch和computed的区别？" class="headerlink" title="4.vue常用指令？html和text的区别？show和if的区别？watch和computed的区别？"></a>4.vue常用指令？html和text的区别？show和if的区别？watch和computed的区别？</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">答：v-html渲染字符串的dom片段，底层是js的innerHTML封装的。v-text只能渲染出字符串内容，底层是js的innerText封装的。</span><br><span class="line">v-show是控制css的display来显示隐藏元素，v-<span class="keyword">if</span>是让元素生成或删除，v-<span class="keyword">if</span>如果用在自定义组件上，则会重复触发组件的生命周期，开销大也会引起页面的回流。频繁切换应该使用v-show。</span><br><span class="line">watch是监听器，它只能每次监听一个数据。computed是计算属性，它可以监听多个值。</span><br><span class="line">监听器可以执行异步，而计算属性不可以执行异步。因为计算属性它需要立即<span class="keyword">return</span>返回值，不能等异步执行完，所以不能执行异步。</span><br><span class="line">监听器没有缓存，而计算属性有缓存，当本次数据更新的值与上一次一致的时候则不会触发。</span><br><span class="line">监听器如果监听引用数据类型【对象或数组】需要开启深度监听，而计算属性可以监听任意类型的数据。</span><br></pre></td></tr></table></figure>

<h5 id="5-什么是生命周期？生命周期函数有哪些？每个函数的功能是什么？"><a href="#5-什么是生命周期？生命周期函数有哪些？每个函数的功能是什么？" class="headerlink" title="5. 什么是生命周期？生命周期函数有哪些？每个函数的功能是什么？"></a>5. 什么是生命周期？生命周期函数有哪些？每个函数的功能是什么？</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">从诞生到消亡的一个过程叫生命周期，在程序中表示从程序被初始化到销毁的过程。</span><br><span class="line">页面打开后在哪个函数中发起自动请求：mounted生命周期中请求，created中也可以。生命周期是同步的，请求是异步的，所以最好在挂载完以后执行。</span><br><span class="line">销毁生命周期用于释放常驻内存的变量：比如定时器，<span class="variable language_">window</span>对象下的全局变量不受当前组件控制。</span><br></pre></td></tr></table></figure>
<h5 id="6-内置组件有哪些？功能分别是什么？"><a href="#6-内置组件有哪些？功能分别是什么？" class="headerlink" title="6.内置组件有哪些？功能分别是什么？"></a>6.内置组件有哪些？功能分别是什么？</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">keep-alive 缓存组件；components组件 动态加载组件；slot插槽；template 模板；transition动画；</span><br></pre></td></tr></table></figure>
<h5 id="7-vue组件通信方式有哪些？"><a href="#7-vue组件通信方式有哪些？" class="headerlink" title="7.vue组件通信方式有哪些？"></a>7.vue组件通信方式有哪些？</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">父传子</span><br><span class="line">子传父</span><br><span class="line">兄弟=&gt;用父组件作为中间代理来向所有的子组件提供数据交互</span><br><span class="line">v-model可以实现：它会向 子组件注入一个value值和一个input方法</span><br><span class="line">.<span class="property">sync</span> &lt;<span class="title class_">Son</span> :data.<span class="property">sync</span>=<span class="string">&#x27;obj&#x27;</span>&gt; 子组件用特定语法实现：$emit(<span class="string">&#x27;update:data&#x27;</span>, &#123;xxx&#125;)</span><br><span class="line">$children 获取直接所有子组件的实例</span><br><span class="line">$parent 获取直接的父组件实例</span><br><span class="line">$root 获取根组件实例</span><br></pre></td></tr></table></figure>
<h5 id="8-vuex的工作（执行）流程是什么？"><a href="#8-vuex的工作（执行）流程是什么？" class="headerlink" title="8. vuex的工作（执行）流程是什么？"></a>8. vuex的工作（执行）流程是什么？</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">答：state值在组件中使用，组件通过dispatch调用actions方法，actions里通过commit调用mutation方法，mutation修改state，state被改变后会通过数据双向绑定发布到所有使用state的组件上使组件更新。</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h5 id="9-vue路由的底层原理是什么？传参方式有哪些？跳转方式有哪些？路由生命周期有哪些？"><a href="#9-vue路由的底层原理是什么？传参方式有哪些？跳转方式有哪些？路由生命周期有哪些？" class="headerlink" title="9.vue路由的底层原理是什么？传参方式有哪些？跳转方式有哪些？路由生命周期有哪些？"></a>9.vue路由的底层原理是什么？传参方式有哪些？跳转方式有哪些？路由生命周期有哪些？</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">答：vue的路由底层是基于<span class="variable language_">window</span>对象的onhashchange封装的hash模式以及使用<span class="variable language_">window</span>.<span class="property">history</span>封装的history模式。</span><br><span class="line">传参方式：prams和query方式</span><br><span class="line">跳转方式<span class="number">2</span>种：router-link 标签跳转又叫声明式导航，$router.<span class="property">push</span> js跳转又叫编程式导航。push向历史记录添加一个，replace是用当前记录替换最后一次记录，go，back</span><br><span class="line">路由拦截器和路由生命周期都是指的路由守卫。</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h5 id="10-什么是模块化开发？"><a href="#10-什么是模块化开发？" class="headerlink" title="10. 什么是模块化开发？"></a>10. 什么是模块化开发？</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">答：把公共部分抽离成一个独立的文件/组件，这种模式就叫模块化开发。说白了，就是代码的复用。</span><br></pre></td></tr></table></figure>

<h5 id="12-seo爬虫是什么？"><a href="#12-seo爬虫是什么？" class="headerlink" title="12.seo爬虫是什么？"></a>12.seo爬虫是什么？</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"> 浏览器爬取网站内容的一种算法，也叫网络爬虫。 h1-h6 标题标签 &lt;img src=<span class="string">&#x27;xxx&#x27;</span> ait=<span class="string">&#x27;log&#x27;</span>&gt;</span><br><span class="line">seo只愿意进入网页爬取写死的dom，静态网页，但是vue的内容都是js生成的，所以seo不会执行js文件，所以它认为你的页面是空的，就走了再也不来。</span><br></pre></td></tr></table></figure>







      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2022/05/23/%E9%9D%A2%E8%AF%95%E9%A2%98/" data-id="cl3i1nkzq00000cd5ft8b83kh" data-title="面试题" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
</article>



  


</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/05/">May 2022</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2022/05/23/%E9%9D%A2%E8%AF%95%E9%A2%98/">面试题</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      
      &copy; 2022 亚鹏<br>
      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    


<script src="/js/jquery-3.4.1.min.js"></script>



  
<script src="/fancybox/jquery.fancybox.min.js"></script>




<script src="/js/script.js"></script>





  </div>
</body>
</html>